<template>
  <div class="all">
    <div class="a-nav">
      <el-input placeholder="请输入手机号查询" v-model="telephone"></el-input>
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <div style="padding-top: 5px;">
      <el-table :data="list" :header-cell-style="{background:'#eef3f7'}" :cell-style="{height:'87px'}">
        <el-table-column align="center" type="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="unionName" label="工会名称"></el-table-column>
        <el-table-column align="center" prop="telephone" label="会长手机号"></el-table-column>
        <el-table-column align="center" label="工会简介">
          <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="工会简介"
                width="200"
                trigger="hover"
                :content="scope.row.info">
                <i slot="reference">{{scope.row.info}}</i>
              </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图标">
          <template slot-scope="scope">
              <el-image :src="scope.row.img"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <i v-if="scope.row.status!='解散'">{{scope.row.status}}</i>
            <i v-else>{{scope.row.status}} 【{{scope.row.shtReason}}】</i>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addTime" label="创建时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" v-if="scope.row.status!='解散'" @click="UnionUserPost(scope.row.union)">查看工会主播</el-button>
            <i v-else>已解散</i>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @current-change="handleCurrentChange"
            :current-page="condition.pageIndex"
            :page-size="condition.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>
    </div>
    <div class="hide"  v-if="shop">
    <div class="Popup" >
        <h3>成员列表<i class="el-icon-circle-close" @click="shop=false"></i></h3>
          <el-table :data="UnionUser">
            <el-table-column align="center" prop="userName" label="用户名"></el-table-column>
            <el-table-column align="center" label="头像">
              <template slot-scope="scope">
               <el-image :src="scope.row.imgUrl" style="width: 50px;"></el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="nickName" label="昵称"></el-table-column>
            <el-table-column align="center" prop="telephone" label="手机号码"></el-table-column>
            <el-table-column align="center" prop="sex" label="性别"></el-table-column>
          </el-table>
          <div class="Page">
                <el-pagination
                background
                hide-on-single-page
                  @current-change="UnionNumber"
                  :current-page="UnionPage.pageIndex"
                  :page-size="UnionPage.pageSize"
                  layout="total, prev, pager, next, jumper"
                  :total="UnionPage.quantity">
                </el-pagination>
          </div>
    </div>
    </div>


  </div>
</template>

<script>
  import {unionListPost,getMembers} from '@/utils/API'
   import Cookies from 'js-cookie'
  export default{
    inject:["reload"],
    data(){
      return{
        list:[],
        condition:{
          quantity:10,
          pageIndex:1,
          pageSize:10,
        },
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        telephone:'',
        UnionUser:[],
        UnionPage:{
          quantity:0,
          pageIndex:1,
          pageSize:15
        }
      }
    },
    methods:{
      //获取列表
      postList(e){
        unionListPost(e,this.admin,this.condition).then(res=>{
          this.list=res.data.unionList
          this.condition.quantity=res.data.total
          console.log(res)
        })
      },
       handleCurrentChange(val) {
        if(this.telephone){
           this.postList(this.telephone)
          }else{
           this.postList()
        }
      },
      //查寻
      query(){
        if(this.telephone){
            var reg=/^1[3456789]\d{9}$/
            if(reg.test(this.telephone)){
              this.postList(this.telephone)
            }else{
              this.$message.error('请输入正确手机号')
            }
            console.log()
        }else{
            this.postList()
        }
      },
      //成员获取
      UnionUserPost(e){
        getMembers(e,this.admin,this.UnionPage).then(res=>{
          if(res.data.total!=0){
             this.UnionUser=res.data.records
             this.UnionPage.quantity=res.data.total
             this.shop=true
          }else{
            this.$message.error('暂无数据')
          }
         
        })
      },
      //成员翻页
        UnionNumber(val){
          this.UnionPage.pageIndex=val
          this.UnionUserPost()
        }
    },
    mounted() {
      this.postList()
    }
  }
</script>

<style lang="scss" scope>
.el-image{
     max-width: 209px;
     max-height: 87px;
}
.el-input{
  width: 180px;
  margin-left: 10px;
}
.hide{
width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

}
.Popup{
  width: 30%;
  padding-bottom: 10px;
  background-color: #fff;
  position: absolute;
    top: 21vh;
    left: 30%;
  text-align: center;
  z-index: 9;
  border-radius: 5px;
      border: 1px solid #eee;
  h3{
    text-align: left;
    padding: 5px 0 5px 6px;
  }
 .el-textarea{
        width: 80%;
        margin: 2% auto;
        display: block;
  }
  .Tips{
      font-size: 12px;
      padding-top: 5px;
      color: #999;
  }
}
.el-link{
     vertical-align: bottom;
}
</style>
